<template>
  <van-tabbar active-color="#754C29" v-model="active">
    <van-tabbar-item icon="wap-home" @click="handleNavigateTab('index')">首页</van-tabbar-item>
    <van-tabbar-item icon="bars" :to="`/home/menu/${null}`" @click="handleNavigateTab('menu/-1')">菜单</van-tabbar-item>
    <van-tabbar-item :badge="cartStore?.total"  :badge-props="{showZero:false}" icon="shopping-cart" @click="handleNavigateTab('cart')">购物车</van-tabbar-item>
    <van-tabbar-item icon="user" @click="handleNavigateTab('mine')">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {showConfirmDialog} from 'vant';
import { useCartStore } from '@/stores/cart';


const cartStore = useCartStore();
const router = useRouter();
const active = ref(0);
const token = localStorage.getItem('token');

const handleNavigateTab = (path) => {
  if(path === 'mine' || path === 'cart'){

    if(!token){
      showConfirmDialog({
        title: '提示',
        message: '请先登录',
      }).then(() => {
        router.push('/login');
      }).catch(() => {});
      return;
    }
  }
  router.push(`/home/${path}`);
}
</script>

<style lang="less" scoped></style>
